<template>
    <table-header
        placeholder="请输入媒资名称"
        :queryList="queryList"
        @pagination="getDataList"
        :rightColSpan="8"
        :leftColSpan="16"
    >
        <template #filter>
            <!--<el-autocomplete
                v-model="queryList.keyword"
                :fetch-suggestions="handleSearchSuggest"
                :trigger-on-focus="false"
                class="inline-input"
                autofocus="true"
                :clearable="true"
                @clear="getDataList"
                placeholder="请输入媒资名称"
                @keyup.enter="getDataList"
                @select="getDataList"
                size="small"
            />-->
            <el-select
                v-model="queryList.mediatype"
                size="small"
                style="margin-right: 10px"
                placeholder="请选择媒资类型"
                @change="handleMediaTypeChange"
                clearable
                @clear="handleMediaTypeClear"
            >
                <el-option
                    v-for="item,index in mediaTypes"
                    :key="index"
                    :label="item"
                    :value="index"
                >
                </el-option>
            </el-select>
            <el-select
                v-model="queryList.catid"
                size="small"
                style="margin-right: 10px"
                placeholder="请选一级分类"
                @change="handleCategoryChange"
                clearable
                @clear="handleCategoryClear"
            >
                <el-option
                v-for="item in categoryData"
                :key="item.catid"
                :label="item.name"
                :value="item.catid">
                </el-option>
            </el-select>
            <el-input
                placeholder="请输入媒资名称"
                v-model="queryList.keyword"
                style="width: 200px"
                :clearable="true"
                @clear="handleKeywordClear"
                size="small"
                @keyup.enter="getDataList"
            />
        </template>
        <template #default>
            <el-button
                size="small"
                type="primary"
                style="margin-left: 10px"
                @click="getDataList"
            >
                搜索
            </el-button>
            <!--<el-button
                size="small"
                type="primary"
                @click="handleDialog('AndvancedSearch')"
            >
                高级搜索
            </el-button>-->
        </template>
        <template #operation>
            <div></div>
        </template>
    </table-header>
    <el-row class="table-box">
        <el-col :span="24" class="mt10 mb10">
            <el-table
                v-loading="isloading"
                :data="tableData.listData"
                border
                max-height="400px"
                highlight-current-row
                @selection-change="handleSelectionChange"
                @row-click="(row) => {handleRowClick(row)}"
                @sort-change="handleTableSortChange"
                ref="tableref"
            >
                <el-table-column type="selection" width="40" />
                <el-table-column label="缩略图" width="60">
                    <template #default="{row}">
                        <span @click.stop>
                            <el-image
                                v-if="row.thumbs.length > 0 && typeof row.thumbs[0] == 'object'"
                                :preview-src-list="srcList"
                                :initial-index="srcList.indexOf(row.thumbs[0].viewurl)"
                                :src="(row.thumbs[0].isself == 1 && row.thumbs[0].sourcefrom == 'cloudstorage') ? row.thumbs[0].viewurl+'&width=50' : row.thumbs[0].viewurl"
                            />
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="媒资ID" prop="mediaid" width="80px" align="center" />
                <el-table-column label="媒资名称" :show-overflow-tooltip="true">
                    <template #default="{row}">
                        <a v-if="row.highlight && row.highlight.name" v-html="row.highlight.name" href="javascript:;" @click.stop="handleToPackageMediaDetail(row)"></a>
                        <a href="javascript:;" @click.stop="handleToPackageMediaDetail(row)" v-else>{{row.name}}</a>
                    </template>
                </el-table-column>
                <el-table-column label="媒资类型" prop="mediatypename" width="100px" :show-overflow-tooltip="true" align="center" />
                <el-table-column label="媒资分类" prop="catname" width="100px" :show-overflow-tooltip="true" align="center" />
                <el-table-column label="是否多集" width="70px" align="center">
                    <template #default="{row}">
                        <span v-if="row.hasseries == 1">是</span>
                        <span v-else>否</span>
                    </template>
                </el-table-column>
                <el-table-column label="所属部门" width="100px" align="center" :show-overflow-tooltip="true">
                    <template #default="{row}">
                        <span v-if="corpid == row.corpid">{{row.groupname}}</span>
                        <span v-else>-</span>
                    </template>
                </el-table-column>
                <el-table-column label="来源企业" width="100px" align="center" :show-overflow-tooltip="true">
                    <template #default="{row}">
                        <span v-if="corpid != row.corpid && corpPartnerKeyValue[row.corpid] != undefined">{{corpPartnerKeyValue[row.corpid]}}</span>
                        <span v-else>-</span>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" width="150px" align="center" prop="cts" sortable="custom">
                    <el-table-column label="更新时间" width="150px" align="center" prop="mts" sortable="custom">
                        <template #default="{row}">
                            {{row.ctime.replace('T', ' ').replace('Z', '')}}<br />
                            {{row.mtime.replace('T', ' ').replace('Z', '')}}
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column label="状态" width="50px" align="center">
                    <template #default="{row}">
                        <span v-if="row.inuse == 1">上线</span>
                        <span v-else>下线</span>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="24" style="margin-top: 10px">
            <table-pagination
            :queryList="queryList"
            :total="tableData.total"
            @pagination="getDataList"
            />
        </el-col>
    </el-row>
    <component
        :is="asyncComponentAndvancedSearch"
        :title="'高级搜索'"
        :visible="dialogVisible.AndvancedSearch"
        :queryList="queryList"
        @cancelDialog="cancelDialog('AndvancedSearch')"
        @getData="getDataList"
        @handleSearchSuggest="handleSearchSuggest"
    />
</template>

<script>
    import { ref, reactive, defineAsyncComponent, toRef } from 'vue'
    import {useRouter} from 'vue-router'
    import TableHeader from "@/views/public/TableHeader";
    import TablePagination from "@/views/public/TablePagination";
    import {getPackageMedias, getSearchSuggest} from "@/api/package/package"
    import getFullHeight from '@/utils/adpative-table.js';
    import {useStore} from 'vuex'
    import {Plus,Delete} from "@element-plus/icons"
    import mediaTypeMixin from "@/mixins/mediaTypeMixin";
    import { getCategories } from '@/api/media/constant'
    import corpPartnerMixin from "@/mixins/corpPartnerMixin";
    export default {
        name: "",
        data(){
            return{
                tableheight:100,
            }
        },
        mounted(){
            this.$nextTick(function () {
                const that = this
                that.tableheight=getFullHeight()
                window.onresize = () => {
                    return (() => {
                        that.tableheight=getFullHeight()
                    })()
                }
            })
        },
        components: {
            Plus,
            Delete,
            TableHeader,
            TablePagination,
            "AndvancedSearch" : defineAsyncComponent(() => import('@/views/public/AndvancedSearch')),
        },
        props:{
            packageid:{
                type:Number,
                required: true
            },
            corppartnerid:{
                type:Number,
                required: true
            },
            corppartnername:{
                type: String,
                required: true
            }
        },
        setup(props) {
            const store = useStore()
            const corpid = store.getters.corpinfo.corpid
            const router = useRouter()
            const asyncComponentAndvancedSearch = ref(null)
            // 媒资类型
            const { mediaTypes } = mediaTypeMixin()
            const handleMediaTypeChange = () => {
                queryList.catid=''
                queryList.page = 1
                getCategory()
                getDataList()
            }
            const handleMediaTypeClear = () => {
                queryList.mediatype = ''
                queryList.catid = ''
                queryList.page = 1
                categoryData.value = []
                getDataList()
            }
            // 一级分类
            const categoryData = ref([])
            const getCategory = () => {
                categoryData.value = []
                if( queryList.mediatype != '' ){
                    getCategories({mediatype:queryList.mediatype,pagesize:1000}).then(response => {
                        if( response.errcode == 0 ){
                            categoryData.value = response.data.list
                        }else{
                            console.log(response)
                        }
                    })
                }
            }
            const handleCategoryChange = () => {
                queryList.page = 1
                getDataList()
            }
            const handleCategoryClear = () => {
                queryList.catid = ''
                queryList.page = 1
                getDataList()
            }
            const handleKeywordClear = () => {
                queryList.keyword = ''
                queryList.page = 1
                getDataList()
            }
            // 图片预览
            const srcList = ref([])
            // 搜索条件
            const queryList = reactive({
                'page': 1,
                'pagesize': 25,
                'packageid': props.packageid,
                // 'corpid': store.getters.corpinfo.corpid,
                'mediatype': '',
                'catid': '',
                'keyword': '',
                'inuse': -1,
                'pkinuse': -1,
                'orderby': ''
            })
            // 列表相关
            const isloading = ref(true)
            const tableData = reactive({
                total: 0,
                listData: []
            })
            const getDataList = () => {
                isloading.value = true;
                getPackageMedias(queryList).then(response => {
                    isloading.value = false;
                    const {total, list} = response.data
                    tableData.total = total
                    tableData.listData = list
                    srcList.value = []
                    list.forEach(item => {
                        if( typeof item.thumbs[0] == 'object' ){
                            srcList.value.push(item.thumbs[0].viewurl)
                        }
                    })
                })
                isloading.value = false
            }
            getDataList()

            // 搜索建议
            const handleSearchSuggest = (value,cb) =>{
                let suggestQuery = {}
                suggestQuery['corpid'] = store.getters.corpinfo.corpid
                suggestQuery['packageid'] = props.packageid
                suggestQuery['inuse'] = -1
                suggestQuery['pkinuse'] = -1
                suggestQuery['prefix'] = value
                //suggestQuery['groupid'] = [0,1]
                const suggestList = ref([])
                getSearchSuggest(suggestQuery).then(response => {
                    if( response.data.list.length > 0 ){
                        response.data.list.forEach(function( suginfo ){
                            suggestList.value.push({value:suginfo.name})
                        })
                        console.log(suggestList.value)
                    }
                })
                cb(suggestList.value)
            }
            //复选框
            const batchCheckBoxData = ref([])
            const tableref = ref(null)
            const handleSelectionChange = (val) => {
                batchCheckBoxData.value = []
                if(val.length > 0){
                    val.forEach(function(item){
                        batchCheckBoxData.value.push(item.mediaid)
                    })
                }
                console.log(batchCheckBoxData.value)
            }
            const handleRowClick = (row) => {
                tableref.value.toggleRowSelection(row)
            }
            //排序
            const handleTableSortChange = (column) => {
                if(column.order == 'ascending'){
                    queryList.orderby = column.prop
                }else if(column.order == 'descending'){
                    queryList.orderby = '-' + column.prop
                }else{
                    queryList.orderby = ''
                }
                getDataList()
            }
            // 弹窗相关
            const dialogVisible = ref({
                AndvancedSearch:false,
            })
            const handleDialog = ( dialogName ) => {
                switch ( dialogName ){
                    case 'AndvancedSearch':
                        asyncComponentAndvancedSearch.value = 'AndvancedSearch'
                        break;
                }
                dialogVisible.value[dialogName] = true
            }
            const cancelDialog = ( dialogName ) => {
                dialogVisible.value[dialogName] = false
            }

            
            
            /** 跳转到内容包媒资详情页 **/
            const handleToPackageMediaDetail = (row) => {
                router.push({path: '/package/content/mediadetail', query: {mediaid: row.mediaid, packageid: props.packageid, mediatype: row.mediatype}})
            }

            // 获取合作企业列表
            let corpPartnerQuery = {corpid: props.corppartnerid,partnertype:0}
            const { corpPartnerKeyValue } = corpPartnerMixin(corpPartnerQuery)
            const localCorpPartnerId = toRef(props, 'corppartnerid')
            const localCorpPartnerName = toRef(props, 'corppartnername')
            corpPartnerKeyValue[localCorpPartnerId.value] = localCorpPartnerName.value
            
            return {
                corpid,
                mediaTypes,
                handleMediaTypeChange,
                handleMediaTypeClear,
                categoryData,
                handleCategoryChange,
                handleCategoryClear,
                handleKeywordClear,
                srcList,
                queryList,
                isloading,
                tableData,
                getDataList,
                handleSearchSuggest,
                tableref,
                handleSelectionChange,
                handleRowClick,
                handleTableSortChange,
                asyncComponentAndvancedSearch,
                dialogVisible,
                handleDialog,
                cancelDialog,
                handleToPackageMediaDetail,
                corpPartnerKeyValue
            }
        }
    }
</script>

<style scoped  lang="scss">

</style>